<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title></title>

    <link href="/styles/base.css" rel="stylesheet" type="text/css">
    <link href="/styles/travelspot.css" rel="stylesheet" type="text/css">
    <link href="/styles/select.css" rel="stylesheet" type="text/css">
    <link href="/styles/scenicdetail.css" rel="stylesheet" type="text/css">
    <link href="/js/plugins/jqPaginator/jqPagination.css" rel="stylesheet" type="text/css">
    <link href="/styles/scenic.css" rel="stylesheet" type="text/css">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <#--<link href="/styles/font-awesome.css" rel="stylesheet">-->

    <script type="text/javascript" src="/js/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="/js/plugins/jqPaginator/jq-paginator.min.js"></script>

    <script type="text/javascript" src="/js/plugins/jquery-form/jquery.form.js"></script>
    <script type="text/javascript" src="/js/system/guide.js"></script>
    <script type="text/javascript" src="/js/system/common.js"></script>

    <script>
        $(function () {

            // 初始显示评论内容
            $("#searchForm").ajaxForm(function (data) {
                $("#scenicCommentTpl").html(data);
            });
            $("#searchForm").submit();


            var synStarnum;
            // 总体评价星星点击事件
            $(".syn-star-choose i").click(function () {
                // 获取星星的数值
                synStarnum = $(this).data('num');
                // 获取所有的星星
                var arr = $(".syn-star-choose i");
                // 清空实心样式, 添加空心样式
                $(arr).addClass("fa-star-o").removeClass("fa-star");
                for (var i = 0; i < synStarnum; i++) {
                    $(arr[i]).addClass("fa-star").removeClass("fa-star-o");
                }
            });
            var sceneryStarnum;
            // 风景评价星星点击事件
            $(".scenery-star-choose i").click(function () {
                // 获取星星的数值
                sceneryStarnum = $(this).data('num');
                // 获取所有的星星
                var arr = $(".scenery-star-choose i");
                // 清空实心样式, 添加空心样式
                $(arr).addClass("fa-star-o").removeClass("fa-star");
                for (var i = 0; i < sceneryStarnum; i++) {
                    $(arr[i]).addClass("fa-star").removeClass("fa-star-o");
                }
            });
            var featureStarnum;
            // 特色评价星星点击事件
            $(".feature-star-choose i").click(function () {
                // 获取星星的数值
                featureStarnum = $(this).data('num');
                // 获取所有的星星
                var arr = $(".feature-star-choose i");
                // 清空实心样式, 添加空心样式
                $(arr).addClass("fa-star-o").removeClass("fa-star");
                for (var i = 0; i < featureStarnum; i++) {
                    $(arr[i]).addClass("fa-star").removeClass("fa-star-o");
                }
            });
            var serviceStarnum;
            // 服务评价星星点击事件
            $(".service-star-choose i").click(function () {
                // 获取星星的数值
                serviceStarnum = $(this).data('num');
                // 获取所有的星星
                var arr = $(".service-star-choose i");
                // 清空实心样式, 添加空心样式
                $(arr).addClass("fa-star-o").removeClass("fa-star");
                for (var i = 0; i < serviceStarnum; i++) {
                    $(arr[i]).addClass("fa-star").removeClass("fa-star-o");
                }
            });

            //当前被点击的图片框
            var div;
            //图片框的点击事件
            $(".rect").click(function () {
                $("#inputFile").click();
                div = this;
            });

            //上传框的值改变事件
            $("#inputFile").change(function () {
                if ($(this).val()) {
                    $("#fileForm").ajaxSubmit({
                        url: "/scenic/image",
                        success: function (data) {
                            if (data.status == 1) {
                                $(div).html('<img src="/' + data.url + '"/>');
                            }
                        }
                    })
                }
            });


            //发表点评
            $("#commentBtn").click(function () {

                //获取所有的img标签中的src, 使用;进行拼接
                var imgArr = $(".imgs img");
                var photoTemp = "";
                for (var i = 0; i < imgArr.length; i++) {
                    photoTemp = photoTemp + $(imgArr[i]).attr("src") + ","
                }
                // 内容
                var content = $("._j_commentarea").val();
                if (!content) {
                    popup("评论内容必填");
                    return;
                }
                $("._j_commentarea").val('');
                var scenicId = $(this).data('id');
                var scenicName = $(this).data('name');

                $.post("/scenic/commentAdd", {
                    photoUrl: photoTemp,
                    content: content,
                    scenicId: scenicId,
                    scenicName: scenicName,
                    synStarnum: synStarnum,
                    sceneryStarnum: sceneryStarnum,
                    featureStarnum: featureStarnum,
                    serviceStarnum: serviceStarnum
                }, function (data) {
                    if (data.success) {
                        //修改评论数
                        $(".replay_num").html(data.data);

                        $("#currentPage").val(1);
                        $("#searchForm").submit();  //重新查一次评论
                    }
                });
            });

            // 标签的点击样式
            $("#_lhp_tags").on('click', 'li', function () {
                $("#_lhp_tags li").removeClass('on');
                $(this).addClass('on');
            });
            // 点击标签, 执行评论的单条件查询
            $("#_lhp_tags").on('click', 'li', function () {
                if ($(this).hasClass("_lhp_all_comment")) {
                    $("#tagCondition").val(0);
                    $("#tagContent").val('');
                }
                if ($(this).hasClass("_lhp_hasPhoto_comment")) {
                    $("#tagCondition").val(1);
                    $("#tagContent").val('');
                }
                if ($(this).hasClass("_lhp_positive_comment")) {
                    $("#tagCondition").val(2);
                    $("#tagContent").val('');
                }
                if ($(this).hasClass("_lhp_moderate_comment")) {
                    $("#tagCondition").val(3);
                    $("#tagContent").val('');
                }
                if ($(this).hasClass("_lhp_nagetive_comment")) {
                    $("#tagCondition").val(4);
                    $("#tagContent").val('');
                }
                if ($(this).hasClass("_lhp_comment_tag")) {
                    $("#tagCondition").val(5);
                    var tagName = $(this).data('tagname');
                    $("#tagContent").val(tagName);
                }

                // 发送加载评论的异步请求并显示
                $("#searchForm").ajaxForm(function (data) {
                    $("#scenicCommentTpl").html(data);
                });
                $("#searchForm").submit();


            });
        })

    </script>


</head>

<body>
<#assign currentNav="scenic">
<#include "../common/navbar.ftl">
<#--文件上传表单, 隐藏-->
<form method="post" enctype="multipart/form-data" id="fileForm" style="display: none">
    <input id="inputFile" type="file" name="file">
</form>
<#--头页面-->
<div class="row row-top">
    <div class="wrapper">
        <div class="extra">
            <!-- 天气 S-->
            <div class="weather" data-cs-p="天气">
                <a href="/weather/10088.html" target="_blank">
                    <img src="http://images.mafengwo.net/images/mdd_weather/icon/icon19.png" width="25" height="25">
                    <span>晴 28℃~37℃</span>
                </a>
            </div>
            <!-- 天气 E-->
            <!-- 收藏去过 S-->
            <div class="action _j_rside want-been">
                <div class="been-box">
                    <a class="_j_beenpoi btn-been _j_hovergo" href="/path/" target="_blank" title="添加至我的足迹"
                       data-cs-p="足迹">
                        <i class="icon"></i>
                        <span class="txt">去过</span>
                    </a>
                    <div class="rate-pop" style="display:none;">
                        <div class="rank-star">
                            <span class="s-star s-star0"></span>
                            <div class="click_star">
                                <a title="1星" rel="nofollow" data-num="1"></a>
                                <a title="2星" rel="nofollow" data-num="2"></a>
                                <a title="3星" rel="nofollow" data-num="3"></a>
                                <a title="4星" rel="nofollow" data-num="4"></a>
                                <a title="5星" rel="nofollow" data-num="5"></a>
                            </div>
                        </div>
                        <span class="rank-hint">必去推荐</span>
                    </div>
                </div>
                <a class="_j_favpoi btn-collect " href="/plan/fav.php?iMid=10088" target="_blank" title="添加收藏"
                   data-cs-p="收藏">
                    <i class="icon"></i>
                    <span class="txt">收藏</span>
                </a>
            </div>
            <!-- 收藏去过 E-->
        </div>
        <!-- 面包屑 S-->
        <div class="crumb" data-cs-p="面包屑">
            <div class="item"><a href="/mdd/" target="_blank">目的地</a><em>&gt;</em></div>
            <div class="item">
                <div class="drop">
                    <span class="hd"><a href="/travel-scenic-spot/mafengwo/10088.html">广州<i></i></a></span>
                    <div class="bd">
                        <i class="arrow"><b></b></i>
                        <div class="col">

                        </div>
                    </div>
                </div>
                <em>&gt;</em>
            </div>
            <div class="item cur">广州景点</div>
        </div>
        <!-- 面包屑 E-->

        <!-- 景点名称-->
        <div class="title">
            <h1>${scenic.name}</h1>
            <div class="en">${scenic.enName}</div>
        </div>
        <!-- POI名称 E-->

        <!-- 快捷导航 S-->
        <div style="height: 60px;">
            <div class="r-nav" id="poi-navbar" data-cs-p="快捷导航">
                <ul class="clearfix">
                    <li data-scroll="overview" class="on">
                        <a title="概况">概况</a>
                    </li>
                    <li data-scroll="attractions" style="display: none">
                        <a title="景点亮点">景点亮点</a>
                    </li>
                    <li data-scroll="commentlist">
                        <a title="蜂蜂点评">蜂蜂点评<span>（5596条）</span></a>
                    </li>
                    <li data-scroll="recommend"><a title="热门推荐">热门推荐</a></li>
                    <li data-scroll="comment" class="nav-right">
                        <a class="btn-reviews" title="我要点评">我要点评</a>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 快捷导航 E-->
    </div>
</div>
<#--详细页面-->
<div data-anchor="overview">
    <div class="row row-picture row-bg">
        <div class="wrapper">
            <div class="bd">
                <div class="pic-big">
                    <img src="${(scenic.photoUrl[0])!}" width="690" height="370">
                </div>
                <div class="pic-small"><img
                        src="${(scenic.photoUrl[1])!}"
                        width="305" height="183"></div>
                <div class="pic-small"><img
                        src="${(scenic.photoUrl[2])!}"
                        width="305" height="183"></div>
                <span>34324张图片</span></div>
            </a></div>
    </div>

    <!-- 简介 S -->
    <div class="mod mod-detail" data-cs-p="概况">
        <div class="summary">${(scenic.introduce)!}</div>

        <ul class="baseinfo clearfix">
            <li class="tel">
                <div class="label">电话</div>
                <div class="content">${(scenic.tele)!}</div>
            </li>
            <li class="item-site">
                <div class="label">网址</div>
                <div class="content"><a href="${(scenic.website)!}" target="_blank"
                                        rel="nofollow">${(scenic.website)!}</a>
                </div>
            </li>
            <li class="item-time">
                <div class="label">用时参考</div>
                <div class="content">${(scenic.useTimeString)!}</div>
            </li>
        </ul>

        <dl>
            <dt>交通</dt>
            <dd>
                <div style="max-height: 48px;">
                    <div>${(scenic.travel)!}</div>
                </div>
            </dd>
        </dl>
        <dl>
            <dt>门票</dt>
            <dd>
                <div style="max-height: 48px;">
                    <div>${(scenic.ticket)!}</div>
                </div>
            </dd>
        </dl>
        <br>
        <dl>
            <dt>开放时间</dt>
            <dd>
                <div style="max-height: 48px;">
                    <div>${(scenic.openTime)!}</div>
                </div>
            </dd>
        </dl>
    </div>
</div>
<#--评论显示-->
<div id="pagelet-block-592e992424e7b5d877db415eacf1ee4d" class="pagelet-block" data-api=":poi:pagelet:poiCommentListApi"
     data-params="{&quot;poi_id&quot;:&quot;25091&quot;}" data-async="1" data-controller="/js/poi/ControllerPoiComment">
    <div class="mod mod-reviews" data-cs-p="评论列表">
        <div class="mhd mhd-large">蜂蜂点评<span>（共有${tagEleCount.commentNum!}条真实评价）</span></div>
    <#--标签-->
        <div class="review-nav">
            <ul class="clearfix " id="_lhp_tags">
                <li class="on _lhp_all_comment">
                    <span class="divide"></span>
                    <a href="javascript:void(0);">
                        <span>全部</span>
                    </a>
                </li>
                <li class="_lhp_hasPhoto_comment">
                    <span class="divide"></span>
                    <a href="javascript:void(0);">
                        <span>有图</span>
                        <span class="num"> (${tagEleCount.commentWithPhotoNum!}条)</span>
                    </a>
                </li>
                <li class="_lhp_positive_comment">
                    <span class="divide"></span>
                    <a href="javascript:void(0);">
                        <span>好评</span>
                        <span class="num">（${tagEleCount.positiveCommentNum!}条）</span>
                    </a>
                </li>
                <li class="_lhp_moderate_comment">
                    <span class="divide"></span>
                    <a href="javascript:void(0);">
                        <span>中评</span>
                        <span class="num">（${tagEleCount.moderateCommentNum!}条）</span>
                    </a>
                </li>
                <li class="_lhp_nagetive_comment">
                    <span class="divide"></span>
                    <a href="javascript:void(0);">
                        <span>差评</span>
                        <span class="num">（${tagEleCount.nagetiveCommentNum!}条）</span>
                    </a>
                </li>
            <#list commentTags as t>
                <li class="_lhp_comment_tag" data-tagName="${t.name}">
                    <span class="filter-word divide"></span>
                    <a href="javascript:void(0);">
                        <span class="num">${t.name}（${t.count}人提及）</span>
                    </a>
                </li>
            </#list>
            </ul>
        </div>
        <div class="loading-img" style="display: none;"><img src="http://images.mafengwo.net/images/weng/loading3.gif">
            Loading...
        </div>
    <#--评论内容-->
        <form id="searchForm" action="/scenic/comment" method="post">
            <input type="hidden" name="currentPage" id="currentPage" value="1">
            <input type="hidden" name="scenicId" value="${scenic.id!}">
            <input id="tagCondition" type="hidden" name="tagCondition" value="0">
            <input id="tagContent" type="hidden" name="keyword">

            <div class="com-box " id="scenicCommentTpl">
            <#--template中的内容-->
            </div>
        </form>


        <div class="more">
            <a href="/poi/youji-25091.html" target="_blank">查看相关游记</a>
        </div>
    </div>


</div>
<#--评论书写-->
<div class="row row-reviewForm" id="comment_20190719082637" data-cs-p="点评">
    <div class="wrapper">
        <div class="mfw-reviews">
            <div id="_j_commentform_cnt">
                <h2>
                    <strong>${(scenic.name)!}</strong>
                    <em>*</em>为必填选项
                </h2>
                <form action="#" method="post" class="_j_commentdialogform" data-typeid="3">
                    <input type="hidden" name="act" value="updateComment">
                    <input type="hidden" name="commentid" value="">
                    <input type="hidden" name="source" value="2">
                    <div class="review-item item-star">
                        <div class="label"><em>*</em>总体评价</div>
                        <div class="review-star _j_rankblock" data-star="" name="rank">
                            <input type="hidden" name="rank" value="" essential="1" data-inputname="总体评价">
                            <span class="star _j_starcount"></span>
                            <div class="syn-star-choose click-star _j_starlist">
                                <i class="fa fa-star-o fa-lg" data-num="1"></i>
                                <i class="fa fa-star-o fa-lg" data-num="2"></i>
                                <i class="fa fa-star-o fa-lg" data-num="3"></i>
                                <i class="fa fa-star-o fa-lg" data-num="4"></i>
                                <i class="fa fa-star-o fa-lg" data-num="5"></i>
                            </div>
                        </div>
                        <span class="txt-tips _j_startip">点击星星打分</span>
                    </div>
                    <div class="review-group">
                        <div class="review-item item-rating"
                             data-conf="{&quot;type&quot;:&quot;select&quot;,&quot;notnull&quot;:&quot;1&quot;,&quot;name&quot;:&quot;\u98ce\u5149&quot;,&quot;conf&quot;:{&quot;options&quot;:[&quot;1&quot;,&quot;2&quot;,&quot;3&quot;,&quot;4&quot;,&quot;5&quot;]},&quot;show&quot;:{&quot;style&quot;:&quot;starRank&quot;}}">
                            <div class="label"><em>*</em>风光</div>
                            <div class="review-score _j_rankblock" data-star="" name="scene_rank">
                                <input type="hidden" name="scene_rank" value="" essential="1" data-inputname="给风光的评分">
                                <span class="star _j_starcount"></span>
                                <div class="scenery-star-choose click-star _j_starlist">
                                    <i class="fa fa-star-o fa-lg" data-num="1"></i>
                                    <i class="fa fa-star-o fa-lg" data-num="2"></i>
                                    <i class="fa fa-star-o fa-lg" data-num="3"></i>
                                    <i class="fa fa-star-o fa-lg" data-num="4"></i>
                                    <i class="fa fa-star-o fa-lg" data-num="5"></i>
                                </div>

                            </div>
                            <span class="txt-tips _j_startip">给风光打分</span>
                        </div>
                        <div class="review-item item-rating"
                             data-conf="{&quot;type&quot;:&quot;select&quot;,&quot;notnull&quot;:&quot;1&quot;,&quot;name&quot;:&quot;\u7279\u8272&quot;,&quot;conf&quot;:{&quot;options&quot;:[&quot;1&quot;,&quot;2&quot;,&quot;3&quot;,&quot;4&quot;,&quot;5&quot;]},&quot;show&quot;:{&quot;style&quot;:&quot;starRank&quot;}}">
                            <div class="label"><em>*</em>特色</div>
                            <div class="review-score _j_rankblock" data-star="" name="feature_rank">
                                <input type="hidden" name="feature_rank" value="" essential="1" data-inputname="给特色的评分">
                                <span class="star _j_starcount"></span>
                                <div class="feature-star-choose click-star _j_starlist">
                                    <i class="fa fa-star-o fa-lg" data-num="1"></i>
                                    <i class="fa fa-star-o fa-lg" data-num="2"></i>
                                    <i class="fa fa-star-o fa-lg" data-num="3"></i>
                                    <i class="fa fa-star-o fa-lg" data-num="4"></i>
                                    <i class="fa fa-star-o fa-lg" data-num="5"></i>
                                </div>

                            </div>
                            <span class="txt-tips _j_startip">给特色打分</span>
                        </div>
                        <div class="review-item item-rating"
                             data-conf="{&quot;type&quot;:&quot;select&quot;,&quot;notnull&quot;:&quot;1&quot;,&quot;name&quot;:&quot;\u670d\u52a1&quot;,&quot;conf&quot;:{&quot;options&quot;:[&quot;1&quot;,&quot;2&quot;,&quot;3&quot;,&quot;4&quot;,&quot;5&quot;]},&quot;show&quot;:{&quot;style&quot;:&quot;starRank&quot;}}">
                            <div class="label"><em>*</em>服务</div>
                            <div class="review-score _j_rankblock" data-star="" name="service_rank">
                                <input type="hidden" name="service_rank" value="" essential="1" data-inputname="给服务的评分">
                                <span class="star _j_starcount"></span>
                                <div class="service-star-choose click-star _j_starlist">
                                    <i class="fa fa-star-o fa-lg" data-num="1"></i>
                                    <i class="fa fa-star-o fa-lg" data-num="2"></i>
                                    <i class="fa fa-star-o fa-lg" data-num="3"></i>
                                    <i class="fa fa-star-o fa-lg" data-num="4"></i>
                                    <i class="fa fa-star-o fa-lg" data-num="5"></i>
                                </div>

                            </div>
                            <span class="txt-tips _j_startip">给服务打分</span>
                        </div>
                    </div>

                <#--输入评价-->
                    <div class="review-item item-comment">
                        <div class="label"><em>*</em>评价</div>
                        <div class="content">
                            <textarea class="_j_commentarea" name="comment" essential="1" data-inputname="点评内容"
                                      placeholder="留下你的评论" data-minlen="15" data-maxlen="1000"></textarea>
                            <p class="_j_commentcounttip">15-1000个字</p>
                        </div>
                    </div>

                <#--传图片-->

                    <div class="container imgs">
                        <p style="position: relative; left: 48px">上传图片</p>

                        <div class="" style="position: relative; left: 80px">
                            <div class="col-3 rect" style="width: 120px; height: 120px; float: left;margin-left: 10px;">
                                <span>上传</span>
                            </div>
                            <div class="col-3 rect" style="width: 120px; height: 120px; float: left;">
                                <span>上传</span>
                            </div>
                            <div class="col-3 rect" style="width: 120px; height: 120px; float: left;">
                                <span>上传</span>
                            </div>
                            <div class="col-3 rect"
                                 style="width: 120px; height: 120px; float: left;">
                                <span>上传</span>
                            </div>
                            <div class="col-3 rect" style="width: 120px; height: 120px; float: left;">
                                <span>上传</span>
                            </div>
                            <div class="col-3 rect" style="width: 120px; height: 120px; float: left;">
                                <span>上传</span>
                            </div>
                        </div>
                    </div>

                <#--<dd data-commentid="" id="_j_addpicbtns" ids="0" style="position: relative;">-->
                <#--<div id="html5_1dg7so8ovm9v1e271vhevbu1p3v3_container" class="moxie-shim moxie-shim-html5"-->
                <#--style="position: absolute; top: 0px; left: 0px; width: 120px; height: 120px; overflow: hidden; z-index: -1;">-->
                <#--<input id="html5_1dg7so8ovm9v1e271vhevbu1p3v3" type="file"-->
                <#--style="font-size: 999px; opacity: 0; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;"-->
                <#--multiple="" accept="image/jpeg,image/gif,image/png,.JPEG"></div>-->
                <#--</dd>-->


                    <div class="review-item item-action">
                        <button title="提交点评" type="button" class="btn-large _j_submit" id="commentBtn"
                                data-id="${scenic.id!}" data-name="${scenic.name!}">提交评论
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<br>
<#include "../common/footer.ftl">
</body>